<template>
  <div class="container">
    <div v-if="isEnableNetdisk===1">
      <!-- 搜索项 -->
      <div class="search_bar">
        <el-form size="small" :inline="true" label-width="68px">
          <el-form-item label="群组名称">
            <el-input
              v-model="sea_form.groupName"
              placeholder="请输入"
              clearable
              @keyup.enter.native="getdataBysearch"

            />
          </el-form-item>
          <el-form-item label="群主">
            <el-input
              v-model="sea_form.groupMasterName"
              placeholder="请输入"
              clearable
              @keyup.enter.native="getdataBysearch"
            />
          </el-form-item>
          <el-form-item label="群组类型">
            <el-select
              placeholder="请选择"
              v-model="sea_form.groupType"
              filterable
            >
              <el-option
                v-for="item in groupTypes"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item class="search_btns">
            <el-button
              type="primary"
              icon="el-icon-search"
              size="mini"
              @click="getdataBysearch"
            >搜索
            </el-button
            >
            <el-button icon="el-icon-refresh" size="mini" @click="resetSearch"
            >重置
            </el-button
            >
          </el-form-item>
        </el-form>
      </div>
      <!--   按钮组-->
      <div class="btns">
        <div>
          <el-button type="success" size="mini" :disabled="multipleSelection.length==0" @click="setGroupMore()">批量配置
          </el-button>
          <el-button type="danger" size="mini" :disabled="multipleSelection.length==0" @click="deleteByid()">批量删除
          </el-button>
        </div>
        <div>
          <el-button type="primary" size="mini" @click="opendefaultdeploy">更多配置</el-button>
        </div>
      </div>
      <el-table
        v-loading="loading"
        :data="postList"
        @selection-change="handleSelectionChange"
      >
        <el-table-column
          type="selection"
          width="55"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="groupName"
          label="群组名称"
          align="center"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="groupMasterName"
          label="群主"
          align="center"
        >
          <template slot-scope="scope">
            {{ scope.row.groupMasterName || '--' }}
          </template>
        </el-table-column>
        <el-table-column
          prop="groupType"
          label="群组类型"
          align="center"
        >
          <template slot-scope="scope">
            <div v-if="scope.row.groupType===0">团队群组</div>
            <div v-if="scope.row.groupType===2">学校群组</div>
            <div v-if="scope.row.groupType===1">分院群组</div>
            <div v-if="scope.row.groupType===3">学科专业组</div>
          </template>
        </el-table-column>
        <el-table-column
          prop="groupUserNum"
          label="群组人数"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="totalStorageSize"
          label="存储容量"
          align="center"
        >
          <template slot-scope="scope">
            {{ scope.row.totalStorageSize }}GB
          </template>
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          label="使用情况"
          align="center"
          sortable
        >
          <template slot-scope="scope">
            <el-progress :show-text="false" :percentage="scope.row.storageUsage"
                         :color="getColor(scope.row.storageUsage)"
            ></el-progress>
            <div class="progress_info">
              <div>{{ convertBytes(scope.row.storageSize) }}/{{ scope.row.totalStorageSize }}GB</div>
              <div>{{ scope.row.storageUsage }}%</div>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button size="mini" type="text" @click="dispositionByid(scope.row)">配置</el-button>
            <el-button size="mini" type="text" @click="groupMember(scope.row)">成员列表</el-button>
            <el-button size="mini" type="text" @click="deleteByid(scope.row)" class="delBtn"
                       v-if="scope.row.groupType==0||(scope.row.groupType==3&&scope.row.canDelStatus==1)||(scope.row.groupType==1&&scope.row.canDelStatus==1)"
            >
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="sea_form.pageNum"
        :limit.sync="sea_form.pageSize"
        @pagination="getList"
      />
    </div>

    <!--    设置群组-->
    <GroupStoreSet ref="groupStoreSet"></GroupStoreSet>
    <!--    群成员-->
    <Groupmember ref="groupmember"></Groupmember>
    <!--    默认配置-->
    <Defaultdeploy ref="defaultdeploy"></Defaultdeploy>

    <el-empty :description="`${tipText}`" v-if="isEnableNetdisk!==1"
              style="position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);"
    ></el-empty>
  </div>

</template>
<script>
import GroupStoreSet from '@/views/resourceLibrary/component/groupSeting.vue'
import Groupmember from '@/views/resourceLibrary/component/groupMember.vue'
import { batchDeleteGroupStorage, getLibrsryGroupList, verifyGroupDelete, zeroStorage } from '@/api/library/librarySet'
import Defaultdeploy from '@/views/resourceLibrary/component/defaultdeploy.vue'
import { isEnableSchoolNetdisk } from '@/api/library_index'
import Popup from '@/components/popup.vue'
import { convertBytes } from '@/views/library_homePage/utils/files'

export default {
  name: 'groupAdmin',
  components: { Popup, Defaultdeploy, Groupmember, GroupStoreSet },
  data() {
    return {
      loading: true,
      total: 30,
      sea_form: {
        pageNum: 1,
        pageSize: 20,
        groupName: '',
        groupMasterName: '',
        groupType: ''
      },
      convertBytes: function(num) {
        return convertBytes(num)
      },
      groupTypes: [
        {
          value: '2',
          label: '学校群组'
        },
        {
          value: '1',
          label: '分院群组'
        },
        {
          value: '3',
          label: '学科专业组'
        },
        {
          value: '0',
          label: '团队群组'
        }
      ],
      multipleSelection: [],
      postList: [],
      isEnableNetdisk: 1,
      tipText: '尚未开通资源库服务，如需使用，请联系管理员'

    }
  },
  mounted() {
    this.getLibraryStatus()
    // 获取是否有群组容量为0
    this.getZeroStorage()

  },
  methods: {
    async getZeroStorage() {
      let res = await zeroStorage()
      if (res.code == 200) {
        let branchNum = res.data.branchNum
        let disciplineNum = res.data.disciplineNum
        let str
        if (disciplineNum > 0 && branchNum > 0) {
          str = '当前有分院群组和学科专业组容量不足，请进行配置'
        } else if (branchNum > 0) {
          str = '当前有分院群组容量不足，请进行配置'
        } else if (disciplineNum > 0) {
          str = '当前有学科专业组容量不足，请进行配置'
        }
        if (str) {
          this.$message({ type: 'warning', message: str })
        }
      }
    },
    // 进度条颜色
    getColor(percentage) {
      if (percentage > 90 || percentage == 90) {
        return '#f56c6c'
      }
    },
    // 获取数据列表
    async getList() {
      this.loading = true
      let res = await getLibrsryGroupList(this.sea_form)
      if (res.code == 200) {
        this.postList = res.rows
        this.total = res.total
      }
      this.loading = false
    },
    // 搜索
    getdataBysearch() {
      this.sea_form.pageNum = 1
      // 发送获取列表请求
      this.getList()
    },
    // 重置
    resetSearch() {
      this.sea_form = {
        pageNum: 1,
        pageSize: 20,
        groupName: '',
        groupOwner: '',
        groupType: ''
      }
      this.getdataBysearch()
    },
    // 多选
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    // 配置
    dispositionByid(row) {
      this.$refs.groupStoreSet.show([row], 1)
    },
    setGroupMore() {
      this.$refs.groupStoreSet.show(this.multipleSelection, 2)
    },

    // 删除
    deleteByid(row) {
      if (row) {
        let arr = []
        arr.push(row.groupId)
        this.deletePre(arr)
      } else {
        this.deletePre(this.multipleSelection.map(item => item.groupId))
      }
    },
    // 群组成员
    groupMember(row) {
      this.$refs.groupmember.show(row.groupId, row.groupType)
    },
    // 删除
    async deletePre(ids) {
      let res = await verifyGroupDelete({ groupIds: ids })
      if (res.code == 200) {
        this.$confirm(`${res.data.isExist ? `选择的资源库中仍有文件存在，删除后不可恢复，确定删除吗？` : `确定删除所选择的的资源库吗？删除后不可恢复？`}`, '删除确认', {
          confirmButtonText: '确定',
          cancelButtonText: '取消'
        }).then(() => {
          this.deleteGroupSeting(ids)
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
      }
    },
    // 删除群组
    async deleteGroupSeting(ids) {
      let res = await batchDeleteGroupStorage({ groupIds: ids })
      if (res.code == 200) {
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
        this.getList()
      }
    },
    opendefaultdeploy() {
      this.$refs.defaultdeploy.show()
    },
    // 获取当前学校资源库状态
    async getLibraryStatus() {
      let res = await isEnableSchoolNetdisk()
      if (res.code == 200) {
        this.isEnableNetdisk = res.data
        if (this.isEnableNetdisk == 2) {
          this.tipText = '尚未开通资源库服务，如需使用，请联系管理员'
        } else if (this.isEnableNetdisk == 4) {
          this.tipText = '资源库服务已到期，如需继续使用，请联系管理员'
        } else if (this.isEnableNetdisk == 3) {
          this.tipText = '资源库服务已停用，如需继续使用，请联系管理员'
        }
        if (this.isEnableNetdisk === 1) {
          this.getList()
        }
      }
    }

  }
}
</script>
<style scoped lang="scss">
::v-deep .el-button--success {
  background-color: #5a9cf8;
  border: 1px solid #5a9cf8;
}

::v-deep .el-button--success.is-disabled {
  background-color: #aacefb;
  border: 1px solid #aacefb;
}

.container {
  padding: 20px;
  box-sizing: border-box;
  min-height: calc(100vh - 84px);

  .search_bar {
    padding: 20px 20px 0 20px;
    background-color: #fafafa;

    .search_btns {
      float: right;
    }
  }

  .btns {
    margin: 20px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .progress_info {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .delBtn {
    color: #e47470;
  }
}
</style>
